

import { onMounted, ref, reactive, watch, computed } from 'vue'

import { getUsersApi } from '@/api/user.js'



export function useUsers () {

  const userList = ref([])
  const total = ref(10)
  // const pagenum = ref(1)
  // const pagesize = ref(10)
  // const query = ref(null)

  const obj = reactive({
    pagenum: 1,
    pagesize: 10,
    query: ''
  })

  const getUsers = () => {

    // let res = await getUsersApi({ pagenum: pagenum.value, pagesize: pagesize.value, query: query.value })

    // console.log('user', res)

    // userList.value = res.data

    getUsersApi(obj)
      .then(res => {
        userList.value = res.data.users
        total.value = res.data.total
      })


  }


  onMounted(() => {
    getUsers()
  })


  return {


    getUsers,
    userList,
    total,
    obj,



  }




}

// pagenum  表示当前页

// pagesize 表示一页显示多少条

export function usePagination () {


  const { getUsers, obj } = useUsers()



  const handleSizeChange = (val) => {
    console.log(`${val} items per page`)

    console.log('handleSizeChange')
    obj.pagesize = val

    getUsers()
  }









  const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)

    console.log('handleCurrentChange')

    obj.pagenum = val

    getUsers()

  }


  return {

    handleSizeChange,
    handleCurrentChange,




  }
}





// 实现搜所功能 

export function useSearch () {

  const { getUsers, userList } = useUsers()


  // console.log(userList)
  const searchClick = () => {

    getUsers()

  }


  return {
    searchClick
  }


}






